<template>
  <div>
    <VantNavigationBar title="注册"></VantNavigationBar>
    <div class="image">
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="1"
        :after-read="afterRead"
      />
      <!-- <ImageUploader :maxSize="1" /> -->
    </div>
    <div class="content">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="userinfo.user_account"
            label="账号："
            placeholder="请输入手机号"
            required
            :rules="usernameRules"
          />
          <!-- 输入密码 -->
          <van-field
            v-model="userinfo.password"
            label="密码："
            type="password"
            required
            placeholder="必须包含大小写字母及数字"
            :rules="pwdRules"
          />
          <van-field
            v-model="userinfo.user_name"
            label="用户名："
            required
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
        </van-cell-group>
      </van-form>
      <div class="logn_btn fts1 tc" @click="goReg">注册</div>
    </div>
  </div>
</template>

<script>
import {
  Form,
  Uploader,
  Field,
  CellGroup,
  showToast,
  showSuccessToast,
} from 'vant'
import { ref } from 'vue'
import VantNavigationBar from '@/components/Navbar'
import api from '@/api/api.js'
// import ImageUploader from '@/components/UploadFile.vue'
import { useRouter } from 'vue-router'
import routerURL from '@/router/routerURL'
export default {
  components: {
    // ImageUploader,
    VantNavigationBar,
    [showToast.name]: showToast,
    [Form.name]: Form,
    [Uploader.name]: Uploader,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [showSuccessToast.name]: showSuccessToast,
  },
  setup() {
    const router = useRouter()

    const fileList = ref([])
    const userinfo = ref({
      user_image: '',
      user_account: '',
      password: '',
      user_name: '',
    })
    //手机号校验
    const usernameRules = [
      { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误' },
    ]
    //密码校验
    const pwdRules = [
      {
        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/,
        message: '密码必包含大小写字母和数字',
      },
    ]
    //上传头像
    const afterRead = (file) => {
      // 创建 FormData 对象，用于发送文件数据
      const formData = new FormData()
      formData.append('file', file.file)
      api
        .uploadImage(formData)
        .then((res) => {
          userinfo.value.user_image = res.filename
        })
        .catch((error) => {
          console.error('Error:', error)
          // 处理错误情况
        })
    }
    const goReg = async () => {
      if (
        !userinfo.value.user_account ||
        !userinfo.value.password ||
        !userinfo.value.user_name
      ) {
        showToast('请填写完整登录信息')
        return
      }
      // 确保表单不为空后再调用后端接口

      userinfo.value.user_image = 'user/' + userinfo.value.user_image
      api.registerApi(userinfo.value).then((res) => {
        if (res.status === 200) {
          showSuccessToast('注册成功')
          router.push({ path: routerURL.LOGIN })
        } else {
          showToast(res.msg)
        }
      })
    }
    return { userinfo, usernameRules, pwdRules, goReg, afterRead, fileList }
  },
}
</script>
<style lang="less" scoped>
.image {
  width: 80px;
  margin: 3rem auto;
}
</style>
